<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    
    <title>上传图片</title>
    <style>
         #chooseImg img
         {
             width: 100px;
             height: 100px;
         }   
         #chooseImg input{
             display: none;
         }
         button{
             margin: 20px;
         }
        </style>
</head>

<body>
    <form>
        <div id="chooseImg">
            <img src="img/add.png" alt="">
            <input type="file">
            <img src="img/add.png" alt="">
            <input type="file">
            <img src="img/add.png" alt="">
            <input type="file">
        </div>
        <div id="upload">
            <button type="button">添加</button>
        </div>
    </form>
</body>

</html>

<script>

    $('button').click(function () {
        $('#chooseImg').append('<img src="img/add.png">');
        $('#chooseImg').append('<input type="file">');
        clickFile();
    })
    clickFile();
    function clickFile() {
        index = 0;
        $('img').each(function (index) {
            $(this).click(function () {
                $(this).next().click()
            })
        })
        $('input[type=file]').each(function () {
            $(this).change(function () {
                var file = $(this).prop('files')[0];
                if (file.type.startsWith('image')) {
                    $(this).prev().attr('src', URL.createObjectURL(file))
                } else {
                    alert('只能是图片呢')
                }
            })
        })
    }


</script>